<template>
  <div class="container" style="margin-bottom:50px">
    <p class="title">订单详情 <el-button type="primary" class="btn" @click="$router.back()">返回</el-button></p>
    <el-form ref="form" label-width="80px" style="width: 80%">
      <el-form-item label="订单信息">
        <label for="">订单编号: </label> <span>{{ info.orderNo }}</span><br>
        <label for="">查博士订单编号: </label> <span>{{ info.cbsOrderNo }}</span><br>
        <label for="">创建时间: </label><span>{{ info.creatTime }}</span><br>
        <label for="">检测套餐: </label><span>{{ info.packageType | fliterpackageType }}</span><br>
        <label for="">上门检测地址: </label><span>{{ info.address }}</span><br>
        <label for="">上门交通费: </label><span>{{ info.travelCost }}</span><br>
        <label for="">平台: </label><span v-if="info.application">{{ info.application=='00'?'ebroker':'车E家' }}</span>
      </el-form-item>
      <el-form-item label="支付信息">
        <label for="">支付方式: </label> <span>{{ ['支付宝','微信'][info.payWay] }}</span> <br>
        <label for="">消费金额: </label><span>{{ info.amount }}</span><br>
        <label for="">支付订单号: </label><span>{{ info.thirdTradeNo }}</span><br>
        <label for="">支付时间: </label><span>{{ info.payTime }}</span><br>
      </el-form-item>
      <el-form-item label="报告信息">
        <label for="">报告状态: </label><span>{{ info.orderStatus | filterOrderStatus }}</span> <br>
        <label for="">报告链接: </label><span v-if="info.reportUrl" style="color:#00f;cursor: pointer;" @click="dialogVisible=true">查看报告</span><br>
        <label for="">报告生成时间: </label><span>{{ info.reportCreateTime || '暂无' }}</span><br>
      </el-form-item>
      <el-form-item label="车辆信息">
        <label for="">VIN: </label> <span>{{ info.vin }}</span> <br>
        <label for="">行驶证: </label><span>
          <!-- <img style="width:100px;height:60px" :src="info.drivingLicenceUrl"> -->
          <el-image
            v-if="info.imgUrl"
            style="width: 100px; height: 60px;vertical-align: top;"
            :src="info.imgUrl"
            :preview-src-list="[info.imgUrl]"
          />

        </span><br>
        <label for="">车牌号:</label><span>{{ info.vehicleNo }}</span> <br>
        <label for="">使用性质:</label><span>{{ ['非营运','营运','营转非','租赁','教练'][info.isUser] }}</span> <br>
        <label for="">初登日期:</label><span>{{ info.registerDate }}</span> <br>
        <label for="">品牌车型:</label><span>{{ info.brandModel }}</span> <br>
      </el-form-item>
      <el-form-item label="用户信息">
        <label for="">用户ID: </label> <span>{{ info.userId }}</span> <br>
        <label for="">用户身份: </label><span>{{ ['普通用户', '经纪人', '城市合伙人','品牌合伙人'][info.roleType] }}</span><br>
        <label for="">联系人: </label><span>{{ info.name }}</span><br>
        <label for="">手机号: </label><span>{{ info.mobile }}</span><br>
      </el-form-item>
      <el-form-item v-if="info.refundTime" label="退款信息">
        <label for="">退款方式: </label> <span>{{ ['支付宝','微信'][info.refundType] }}</span> <br>
        <label for="">退款时间: </label><span>{{ info.refundTime }}</span><br>
        <label for="">退款金额: </label><span>{{ info.refundAmount }}</span><br>
        <label for="">退款订单号: </label><span>{{ info.refundTradeNo }}</span><br>
      </el-form-item>
    </el-form>
    <el-dialog v-dialogDrag title="报告详情" :visible.sync="dialogVisible" width="430px">
      <iframe
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        scrolling="yes"
        allowtransparency="yes"
        style="width:400px;height:800px"
        :src="info.reportUrl"
      />
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      info: {
        'orderId': 36, // 订单id
        'orderNo': 'CBS04202108250000004', // 订单编号
        'cbsOrderNo': '8ab04be29d9a48a4bc9d4a89bd197c64', // 查博士订单编号
        'creatTime': null, // 创建时间
        'packageType': 101, // 检测套餐 101-事故排查检测,102-重要部件检测,103-全面检测
        'address': '广东省深圳市龙华区龙华汽车站', // 上门检测地址
        'travelCost': 95, // 上门交通费
        'payWay': 0, // 支付方式 0-支付宝，1-微信，2-积分
        'amount': 294, // 消费金额
        'thirdTradeNo': '2021082522001489241417543560', // 支付订单号
        'payTime': '2021-08-25 18:28:57', // 支付时间
        'orderStatus': 102, // 报告状态 101-待付款,102-待检测,103-检测中,104-已检测,105-订单取消
        'reportCreateTime': null, // 报告生成时间
        'vin': 'LGXC76C34J0080165', // VIN
        'imgUrl': 'https://ecar-test.oss-cn-shenzhen.aliyuncs.com/ecar/app/vehicleTravel/8f712770-590a-4fd7-833b-2135b405b065.jpg', // 行驶证图片
        'vehicleNo': '粤BF65732', // 车牌号
        'isUser': 0, // 使用性质 0-非营运,1-营运,2-营转非,3-租赁,4-教练
        'registerDate': '2021-03-01', // 初登日期
        'brandModel': null, // 品牌车型
        'userId': 148, // 用户id
        'roleType': 0, // 角色类型：0普通用户 1经纪人 2城市合伙人 3品牌合伙人
        'name': 'xufenyong', // 联系人
        'mobile': '14718099410', // 手机号
        'refundType': null,
        'refundTime': null, // 退款时间
        'refundAmount': null, // 退款金额
        'refundTradeNo': null,
        'reportUrl': 'https://api.chaboshi.cn/new_report/show_reportMobile?userid=3449184&orderid=58d181b5003b4158b6025c034a30d0db&timestamp=1600064340038&nonce=2d90cb0a-f652-11ea-a277-309c23b16ffa&signature=IYDKV4tuLsGdddZfP1b8KWXBOg4%3D' // 报告链接
      }
    }
  },
  created() {
    this.$get(`/web/vehicleDetection/getBackDetails?orderId=${this.$route.query.id}`).then(res => {
      if (res.data.code === '0') {
        this.info = res.data.data
      } else {
        this.$message.error(res.data.message)
      }
    })
  }

}
</script>

<style lang="scss" scoped>
.container {
  .el-form-item {
    /deep/ .el-form-item__label {
      font-weight: 700 !important;
    }
  }

  width: 80%;
  margin: 0 auto;
  .title {
    position: relative;
    height: 80px;
    font-size: 24px;
    line-height: 80px;
    text-align: center;
    .btn{
      position: absolute;
      right: 0;
      top: 25px;
    }
  }
  label {
    width: 200px;
    display: inline-block;
    text-align: center;
  }
}
</style>

